import React from 'react'
import {QrCodeWrapper,QrCodeBox} from '../style'
import {CSSTransition} from "react-transition-group";
import {connect} from "react-redux";
import {actionCreators} from '../store';
import zfb from '../../../statics/zfb.png'
 class QrCode extends React.PureComponent{
    render(){
        const {QrCodeMouse,handleMouseEnter,handleMouseLeave}=this.props;
        return(
            <QrCodeBox>
            <QrCodeWrapper onMouseEnter={handleMouseEnter}
                           onMouseLeave={handleMouseLeave}
            >
                <img className="QrCodePic" src={zfb} alt=""/>
                <div className="QrCodeInfo">
                    <p className="title">打开支付宝扫一扫<span className='iconfont'>&#xe61c;</span></p>
                    <p className="description">随时随地激发你的创作灵感</p>
                </div>
            </QrCodeWrapper>
                <CSSTransition
                    in={QrCodeMouse}
                    timeout={200}
                    classNames="hide">
                 <div className={QrCodeMouse? 'QrCodeMouse':''}></div>
                </CSSTransition>
            </QrCodeBox>
        )
    }
}
const mapState = (state) => ({
    QrCodeMouse: state.getIn(['home', 'QrCodeMouse'])
});
const mapDispatch = (dispatch) => {
    return {
        handleMouseEnter(){
            dispatch(actionCreators.mouseEnter())
        },
        handleMouseLeave() {
            dispatch(actionCreators.mouseLeave())
        }
    }
};
export default connect(mapState,mapDispatch)(QrCode)
